<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script type="text/javascript">
function packCSS(id) {
	var packField = document.getElementById(id), 
		ndeso = document.getElementById('ndeso'),
		rep = packField.value;
		if(ndeso.checked) {
			rep = rep.replace(/\/\*[\s\S]*?\*\//gm, "");
		}
		rep = rep.replace(/\t/g, "");
		rep = rep.replace(/\n\s+|\n+/g, "\n");
		rep = rep.replace(/\s+{([\n\s]+)/g, "{");
		rep = rep.replace(/;([\n\s]+)/g, ";");
		rep = rep.replace(/\s+}([\n\s]+)/g, "}\n"); 
		rep = rep.replace(/}\n}/g, "}}");
		rep = rep.replace(/(\s+{|{\s+)/g, "{");
		rep = rep.replace(/\n+/g, "\n");
		rep = rep.replace(/:\s+/g, ":");
		rep = rep.replace(/,\s+/g, ",");
		rep = rep.replace(/;}\s+/g, "}\n");
		rep = rep.replace(/:0px/g, ":0");
		rep = rep.replace(/ 0px/g, " 0");
		packField.value = rep;
		packField.focus();
		packField.select();
}
function unPackCSS(id) {
		document.getElementById('ndeso').checked = false;
		packCSS('unPack'); // pack first...
	var unPackField = document.getElementById(id),
		breakMultipleSelector = document.getElementById('bs'),
		toGondez = document.getElementById('gondez'),
		rep = unPackField.value;
		rep = rep.replace(/{/g, " {\n  ");
		rep = rep.replace(/;|;\s+/g, ";\n  ");
		rep = rep.replace(/;\n  |;\s+\n  /g, ";\n  ");
		rep = rep.replace(/;(\n|\n\s+|\s+\n)}/g, ";\n}");
		rep = rep.replace(/}/g, ";\n}\n");
		rep = rep.replace(/\{\n\s+;\n\}/g, "{}");
		rep = rep.replace(/\n;\n}/g, "\n}");
		rep = rep.replace(/\n}\n}/g, "\n}}");
		// Finishing...
		rep = rep.replace(/;\n  ;\n}/g, ";\n}");
		if(toGondez.checked) rep = rep.replace(/\n +/g, "\n\t");
		rep = rep.replace(/;\n(  |\t)\/\*/g, "; /*");
		rep = rep.replace(/\n\*/g, "\n *");
		rep = rep.replace(/\n \*\//g, "\n *\/\n");
		rep = rep.replace(/@(media|-webkit|-moz|-ms|-o|keyframes)(.*[^\}])\n  /g, "@$1$2\n");
		rep = rep.replace(/ \* {/g, "\* {");
		rep = rep.replace(/ \*:/g, "\*:");
		if(breakMultipleSelector.checked) {
			rep = rep.replace(/,#/g, ",\n#"); // Break ID selectors
			rep = rep.replace(/,\./g, ",\n\."); // Break class selectors
			rep = rep.replace(/,\n#([0-9A-Fa-f]{3,6})/g, ",#$1"); // Re-inline Hex Code (something that looks like IDs)
			rep = rep.replace(/,\n\.([0-9])/g, ",.$1"); // Re-inline decimal number (something that looks like classes)
			// Break all tagName selectors
			rep = rep.replace(/,(html|style|body|div|dl|dt|dd|ul|ol|li|h1|h2|h3|h4|h5|h6|pre|code|form|fieldset|legend|input|button|textarea|p|blockquote|table|tbody|thead|th|td|fieldset|img|address|caption|cite|dfn|em|a|b|i|u|q|strong|var|select|option|optgroup|del|ins|abbr|acronym)/g, ",\n$1");
			rep = rep.replace(/,(article|aside|details|figcaption|figure|footer|header|hgroup|menu|nav|section|audio|canvas|video)/g, ",\n$1");
			rep = rep.replace(/,\ninset /g, ",inset ");
		}
		unPackField.value = rep;
		unPackField.focus();
		unPackField.select();
}

function clearField(id) {
	var field = document.getElementById(id);	
		field.value = "";
		field.focus();
}
</script>

<style type="text/css">
#ndeso,#pack{display:none;}
</style>

</head>

<body>

<div id="page-wrap"><!-- AddThis Button BEGIN -->
<div class="addthis_toolbox addthis_default_style">

</div>
<!-- AddThis Button END -->
<div style="clear:both;"></div>

 <!--  <div class="col left" style="display:none;">
  <h2>pack CSS</h2>
   <textarea spellcheck="false" id="pack" placeholder="pack CSS here..."></textarea>
      <div class="button-group">
        <button onclick="packCSS('pack');">pack CSS</button>
        <button onclick="clearField('pack');">Reset</button>
          <div>
            <p>
              <input type="checkbox" id="ndeso" />
              <label for="ndeso">Strip all comments</label>
            </p>
            <p>
              <input type="checkbox" id="superCompact" />
              <label for="superCompact">Super Compact</label>
            </p>
           </div>
      </div>
      


  </div>-->
  <div class="col right"><input id="ndeso"/><span id="pack"></span>
  <h2>Unpack CSS</h2>
    <textarea spellcheck="false" cols="80" rows="20" id="unPack" placeholder="Unpack CSS here..."></textarea>   
      <div class="button-group">
        <button onclick="unPackCSS('unPack');">Unpack CSS</button>
        <button onclick="clearField('unPack');">Reset</button>
          <div>
            <p>
            <input type="checkbox" onchange="unPackCSS('unPack');" id="gondez" />
            <label for="gondez">Replace double space with single tab character</label>
            </p>
            <p>
            <input type="checkbox" onchange="unPackCSS('unPack');" id="bs" checked="true" />
            <label for="bs">Break multiple selector (e.g: <code>html,body,table {}</code>)</label>
            </p>
          </div>
      </div>
  </div>
</div>

<div class="footer"><a href="http://under-88.blogspot.com/">Blog</a> | About Me <a href="https://plus.google.com/109783772548428705949/post">Denddy Gustiana Nugraha</a></div>

</body>
</html>
